<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
    <template id="father">
        <div class="father">
            <p>我是父组件 叫做{{fname}}</p>
            <p>今天儿子告诉我他有女朋友了 叫做{{erxifu}}</p>
            <input type="button" value="告诉儿子好消息" @click="tellgoodmessage">
            <son></son>
            <daughter></daughter>
        </div>
    </template>
    <template id="son">
        <div class="son">
            <p>我是子组件之一 我叫{{sname}}</p>
            <p>今天我妹妹告诉我她有男朋友了 名字叫做{{meifu}}</p>
            <p>今天我父亲告诉我一个好消息，他说我是{{getgoodmessage}}</p>
            <input type="button" value="告诉妹妹" @click="tellgfname">
            <input type="button" value="告诉父亲" @click="tellfgfname">
        </div>
    </template>
    <template id="daughter">
        <div class="daughter">
            <p>我是子组件之一 我叫{{dname}}</p>
            <p>今天我哥哥告诉我他有女朋友了,名字叫做{{saozi}}</p>
            <input type="button" value="告诉哥哥" @click="callbfname">
        </div>
    </template>
</body>
<script>
    // 创建事件总线实例对象
    // var bus = new Vue()
    var car = new Vue()
    // var ads = new Vue()
    // var kbs = new Vue()
    // 父组件
    Vue.component('father', {
        template: "#father",
        data() {
            return {
                fname: '吉吉国王',
                erxifu:'??',
                goodmessage:'富二代'
            }
        },
        mounted(){
            car.$on('getfgfname',(data)=>{
                this.erxifu=data;
            })
        },
        methods:{
            tellgoodmessage(){
                car.$emit('getgoodmessage',this.goodmessage)
            }
        },
        components: {
            'son': {
                template: '#son',
                data() {
                    return {
                        sname: 'jack',
                        meifu: '??',
                        gfname:"翠花",
                        getgoodmessage:"??"
                    }
                },
                mounted() {
                    car.$on('getbfname', (data) => {
                        this.meifu = data;
                    }),
                    car.$on('getgoodmessage',(data)=>{
                        this.getgoodmessage=data;
                    })
                },
                methods: {
                    tellgfname(){
                        car.$emit('getgfname',this.gfname)
                    },
                    tellfgfname(){
                        car.$emit('getfgfname',this.gfname)
                    }
                }
            },
            'daughter': {
                template: "#daughter",
                data() {
                    return {
                        dname: "lucy",
                        bfname: "狗蛋",
                        saozi:"??"
                    }
                },
                methods: {
                    callbfname() {
                        car.$emit('getbfname', this.bfname)
                    }
                },
                mounted () {
                    car.$on('getgfname',(data)=>{
                        this.saozi=data
                    })
                }
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {

        }
    })
</script>

</html>